<style lang="less">
@import "./home.less";
</style>

<template>
  <div style="height: 100%">
    <div class="home" v-if="currNav == 'home'">
      <Row :gutter="10" style="margin-left:0 !important; margin-right: 0 !important;">
        <Col :xs="24" :sm="24" :md="12" :lg="6" :style="{ marginBottom: '10px' }">
          <card1 id="card1" prefix="￥" :end-val="count.data1" title="投资总额"
                 :image="require('@/assets/icon/money.png')" width="34px" height="34px"/>
        </Col>
        <Col :xs="24" :sm="24" :md="12" :lg="6" :style="{ marginBottom: '10px' }">
          <card2 id="card2" suffix="%" :end-val="count.data2" color="#f90" title="销售量增长" description="相比昨日"/>
        </Col>
        <Col :xs="24" :sm="24" :md="12" :lg="6" :style="{ marginBottom: '10px' }">
          <card4 title="待办事项" :time="time" description="您有一个新的待审批任务，请前往查看"/>
        </Col>
        <Col :xs="24" :sm="24" :md="12" :lg="6" :style="{ marginBottom: '10px' }">
          <card3 title="应用中心" description="销量统计，用户统计，日活分析" :image="require('@/assets/icon/app.png')"
                 width="34px" height="34px" titleSize="18px"/>
        </Col>
      </Row>
      <Row :gutter="10" style="margin-left:0 !important; margin-right: 0 !important;">
        <Col :xs="24" :sm="24" :md="12" :lg="6" :style="{ marginBottom: '10px' }">
          <card1 id="card5" :bordered="false" :end-val="126778" title="今日新增互动数" backgroundColor="#fff4df"
                 :image="require('@/assets/icon/comment.png')"
                 width="34px" height="34px"/>
        </Col>
        <Col :xs="24" :sm="24" :md="12" :lg="6" :style="{ marginBottom: '10px' }">
          <card1 id="card6"
                 :bordered="false"
                 :end-val="68893"
                 backgroundColor="#6993fe"
                 countColor="#fff"
                 icon="md-person-add"
                 iconColor="#fff"
                 titleColor="#fff"
                 title="今日新增用户"/>
        </Col>
        <Col :xs="24" :sm="24" :md="12" :lg="6" :style="{ marginBottom: '10px' }">
          <card1 id="card7"
                 :bordered="false"
                 :end-val="count.data4"
                 backgroundColor="#8950fe"
                 countColor="#fff"
                 icon="md-cloud-download"
                 iconColor="#fff"
                 titleColor="#fff"
                 title="今日下载量"/>
        </Col>
        <Col :xs="24" :sm="24" :md="12" :lg="6" :style="{ marginBottom: '10px' }">
          <card1 id="card8"
                 :bordered="false"
                 :end-val="13507632434"
                 backgroundColor="#f64e61"
                 countColor="#fff"
                 icon="md-calendar"
                 iconColor="#fff"
                 titleColor="#fff"
                 title="月活"/>
        </Col>
      </Row>
      <Row :gutter="10" style="margin-left:0 !important; margin-right: 0 !important;">
        <Col :xs="24" :sm="24" :lg="24" :xl="16" :style="{ marginBottom: '10px' }">
          <visit-volume/>
        </Col>
        <Col :xs="24" :sm="24" :lg="24" :xl="8" :style="{ marginBottom: '10px' }">
          <visit-separation/>
        </Col>
      </Row>
    </div>
    <change-pass v-model="showChangePass"></change-pass>
    <iframe v-if="currNav == 'bigScreen'" id="iframe" src="/big_screen/index.html" frameborder="0" width="100%" height="100%"
            scrolling="auto"></iframe>
  </div>
</template>

<script>
import {ipInfo, checkPassword} from "@/api/index";
import visitVolume from "./components/visitVolume.vue";
import visitSeparation from "./components/visitSeparation.vue";
import card1 from "@/views/my-components/widget/card1.vue";
import card2 from "./components/card2.vue";
import card3 from "@/views/my-components/widget/card3.vue";
import card4 from "@/views/my-components/widget/card4.vue";
import Cookies from "js-cookie";
import changePass from "../change-pass/changePass";

export default {
  name: "home",
  components: {
    visitVolume,
    visitSeparation,
    card1,
    card2,
    card3,
    card4,
    changePass
  },
  data() {
    return {
      showVideo: false,
      count: {
        data1: 5396,
        data2: 68,
        data3: 19305,
        data4: 39503498,
      },
      city: "未知",
      departmentTitle: "无",
      userType: "无",
      time: "",
      price: "...",
      showChangePass: false
    };
  },
  computed: {
    currNav() {
      let currNav = this.$store.state.app.currNav;
      if(currNav == 'home' || currNav == 'bigScreen') {
        this.$store.commit("setMainTheme", 'topNav');

        this.$store.commit("setMenuTheme", "black");
        this.$store.commit("setNavTheme", "black");
        this.$store.commit("setFixNav", true);
        this.$store.commit("setShowTags", false);
        this.$store.commit("setMenuWidth", 0);
      }else {
        this.$store.commit("setMainTheme", 'topNav');

        this.$store.commit("setMenuWidth", 220);
      }
      return currNav;
    },
    nickname() {
      return this.$store.state.user.nickname;
    },
    avatar() {
      return this.$store.state.user.avatar;
    },
  },
  methods: {
    async init() {
      //判断当前用户的密码是否过于简单
      let res = await checkPassword().then(res => res);
      if (res.success && res.data) {
        this.$Modal.warning({
          title: '系统提示',
          content: '您的登录密码过于简单，请修改您的登录密码！',
          onOk: () => {
            this.showChangePass = true;
          },
        });
        return;
      }
      let userInfo = JSON.parse(Cookies.get("userInfo"));
      this.departmentTitle = userInfo.departmentTitle;
      if (userInfo.type == "0") {
        this.userType = "普通用户";
      } else if (userInfo.type == "1") {
        this.userType = "管理员";
      }
      ipInfo().then((res) => {
        if (res.success) {
          this.city = res.data;
        }
      });
      this.time = this.format(new Date(), "yyyy年MM月dd日");
    },
  },
  mounted() {
    this.init();
  },
};
</script>
